<template>
	<view class="noData hideToShow" :style="{ backgroundColor: bgColor }">
		<view class="image">
			<!--#ifdef  MP-WEIXIN || APP-PLUS  -->
			<image :src="custom == true ? OSS_HOST+'notFound.png' : OSS_HOST+'noNetWorkNew.png'"></image>
			<!--#endif  -->
			<!--#ifdef  H5  -->
			<view  class="iconfont category-iconfont" >
				&#xe657;
			</view>
			<!--#endif  -->
		</view>
		<!-- 网络连接失败默认显示内容 -->
		<view class="nodata-content" v-if="getNetType == 'none' && custom == false">
			<text class="title" :style="{ color: mainColor }">{{ mainText }}</text>
			<text class="desc" :style="{ color: viceColor }">{{ viceText }}</text>
			<!-- #ifdef MP || H5 -->
			<button class="btn" type="default" @tap="setting(true)">刷新试试</button>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<button class="btn" type="default" @tap="setting(netWorkStatus)">{{ netWorkStatus ? '刷新试试' : '去设置' }}</button>
			<!-- #endif -->
		</view>
		<!-- 自定义内容 -->
		<slot />
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import settings from '@/utils/settings.js';
import {oss_host} from '@/config/config.js';
export default {
	props: {
		isShow: {
			type: Boolean,
			default: false
		},
		/* 背景颜色自定义 */
		bgColor: {
			type: String,
			default: '#ffffff'
		},
		/* 标题颜色自定义 */
		mainColor: {
			type: String,
			default: '#373a40'
		},
		/* 描述颜色自定义 */
		viceColor: {
			type: String,
			default: '#8b8b8b'
		},
		// 是否开启自定义
		custom: {
			type: false,
			default: false
		}
	},
	computed: {
		...mapGetters(['netWorkStatus']),	
		getNetType(){
			return this.netType	
		}
		
	},
	data() {
		return {
			type: '',
			netType: 'none',
			mainText: '网络居然崩溃了',
			viceText: '别紧张,去检测一下网络设置',
			// 图片链接站点
			OSS_HOST:oss_host,
			// netWorkImg: '/static/noNetWorkNew.png',
			// noDataImg: '/static/notFound.png'
		};
	},
	methods: {
		setting(status) {
			/* 检查到网络已打开,请点击按钮手动刷新数据 */
			if (status) {
				this.$emit('handle', status);
				/* 如果没有网络,打开系统设置检查网络连接 */
			} else {
				settings.open(settings.SETTINGS);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.noData {
	width: 100%;
	height:1200rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	.image {
		width: 187upx;
		height: 144upx;
		image {
			width: 100%;
			height: 100%;
		}
		.iconfont{
			font-size: 50px;
		}
	}
	.nodata-content{
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		letter-spacing: 1upx;
		.title {
			font-size: 36upx;
		}
		.desc {
			font-size: 28upx;
			margin-top: 6upx;
		}
		.btn {
			width: 160upx;
			height: 65upx;
			color: #868d91;
			font-size: 24upx;
			margin-top: 34upx;
			border-radius: 36upx;
			border: 1upx solid #d4d4d4;
		}
		.btn::after {
			border: none;
		}
	}
}
</style>
